@import "src/style/index";

.draft-home{
	.scroll-wrapper{
    top:r(44); 
  }
	.tab-header{
		background-color: #fff;
		height:r(44);
		text-align:center;
		.th-item{
			font-size:r(15);
			color:$base-color-666;
			.icon{
				width:r(13);
				height: r(14);
				margin-right:r(5);
			}
			p{
				width:r(110);
				margin:0 auto;
				line-height:r(44);
				position:relative;
			}
			& + .th-item{
				position:relative;
				&:after{
					content:"";
					position:absolute;
					left:0;
					top:r(10);
					bottom:r(10);
					width:r(1);
					@include borderLeft();
				}
			}
			&.active{
				color:$base-color-18428d;
				p{
					&:after{
						position:absolute;
						content:"";
						bottom:0;
						left:0;
						right:0;
						height:r(3);
						border-radius:r(49);
						background-color:$base-color-18428d;
					}
				}
			}
		}
	}
	
	.tab-body{
		.tab-body-item{
			
			display: none;
			&.active{
				display:block;
			}
			.draft-list{
				padding: 0 r(10) r(10);
				.item{margin-top:r(10)}
				.item-link{
					display:block;
					background-color:#fff;
					border-radius:r(4);
					position:relative;
					z-index:1;
					padding:r(10) r(12);
					overflow:hidden;
					box-shadow:0 r(1) r(6) 0 rgba(161,174,178,0.2);
					&:after{
						content: "";
				    position: absolute;
				    left: 0;
				    top: 0;
				    width: r(3);
				    height: 100%;
				    background: $base-color-18428d;
					}
					.tit-3{
						font-size:r(14);
						line-height:r(20);
						@include ellipsis;
						color:#031D38;
						.icon{
							margin:r(-2) r(8) 0 0;
							width:r(44);
							height:r(18);
						}
					}
					.inner{
						padding:r(10) 0 0;
						.line{
							height:r(33);
							line-height:r(33);
							font-size:r(11);
							.val{
								font-size:r(24);
							}
						}
						.lightspot{
							.line{
								color:#F8A000;
							}
						}
						.deadline{
							.line{
								color:$base-color-18428d;
							}
						}
						.weaken{
							padding:r(2) 0 0;
							font-size: r(11);
							color:#A2A9B1;
						}
						.ui-button{width:r(60);font-size:r(14)}
					}
				}
				/*换票*/
				&.barter{
					
					.item-link{
						&:after{
					    background: #499de3;
					  }
					  .inner{
					  	.deadline{
								.line{
									font-size:r(14);
								}
								.weaken{
									padding:r(2) 0 0 r(7);
								}
							}
					  }
					}
				}
			}
		}
	}

}





